<template>
	<div class="upload">
		<el-upload class="upload-demo" :action="action" :limit="option.limit" accept="image/*" :data="option.data" :with-credentials="true" :on-remove="remove" :on-exceed="exceed" :before-upload="beforeUpload" :on-success="upLoadOk" :file-list="fileList" ref="upLoad" list-type="picture">
			<el-button size="small" type="primary">点击上传</el-button>
			<el-input v-model="option.value" type="hidden" style="display:none;"></el-input>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,
				<span style="color:red" v-text="option.limit?`最多${option.limit}张`:'非必传'"></span> ,且不超过
				<b v-text="`${option.maxSize||100}kb`"></b>
			</div>
		</el-upload>
	</div>
</template>
<script>
export default {
	name: 'vUpLoad',
	props: {
		option: {
			type: Object,
			default() {
				return {
					action: 'http://127.0.0.1:7001/common/upLoad',
					maxSize: 130,
					data: { dir: 'active' },
				};
			},
		},
	},
	data() {
		return {
			upLoadImg: {},
		};
	},
	computed: {
		fileList() {
			let temp = [];
			try {
				temp = JSON.parse(this.option.fileList);
				console.log('复制爱了');
			} catch (error) {
				temp = {};
			}

			let res = [];
			for (let key in temp) {
				res.push({
					url: temp[key],
					name: key,
				});
			}
			return res;
		},
		action() {
			let url = this.sessionGet('baseUrl');
			return url ? url + '/common/upLoad' : this.option.action;
		},
	},
	mounted() {
		// this.upLoadImg = JSON.parse(this.option.fileList);
	},
	methods: {
		upLoadOk(res, file, fileLis) {
			let { response, uid } = file;
			if (response.code === 10200) {
				// this.upLoadImg[uid] = response.data.url;
				// this.option.value = JSON.stringify(this.upLoadImg);
				// this.$parent.resetField()
				this.option.value = this.dataFormData(fileLis);
				this.$emit('imgsChange', this.option.value);
			} else {
				log.warn(response.msg);
				this.$refs.upLoad.clearFiles();
			}
		},
		exceed() {
			log.warn('图片上传超过最大限制');
		},
		remove(file, fileList) {
			// console.log('%c gc_file=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', file, fileList);
			// delete this.upLoadImg[file.name];
			// console.log('%c gc_file.uid=>: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',file.uid);
			// console.log('%c gc_this.upLoadImg=>: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',this.upLoadImg);
			// this.option.value = JSON.stringify(this.upLoadImg);
			this.option.value = this.dataFormData(fileList);
			console.log('%c gc_fileLis=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', this.option.value);
			this.$emit('imgsChange', this.option);
		},
		beforeUpload(file) {
			const { size } = file;
			if (size / 1000 > this.option.maxSize) {
				log.warn(`上传图片不能超过${this.option.maxSize}kb`);
				return false;
			}
		},
		dataFormData(data) {
			let temp = {};
			data.map(item => {
				console.log('%c gc_item.response=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', item.response);
				item.response && item.response instanceof Object ? (temp[item.name] = item.response.data.url) : (temp[item.name] = item.url);
			});
			return JSON.stringify(temp);
		},
	},
	watch: {
		'option.value'(val) {
			if (!val) {
				this.upLoadImg = {};
				// console.log('%c gc_valgggg=>: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',val);
			}
		},
	},
};
</script>

